<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!-- topbar starts -->
<div class="navbar">
	<div class="navbar-inner">
		<div class="container-fluid">
			<a class="btn btn-navbar" data-toggle="collapse"
				data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse"> <span
				class="icon-bar"></span> <span class="icon-bar"></span> <span
				class="icon-bar"></span>
			</a>
			<c:choose>
				<c:when test="${userDetails.fName==null}">
					<a class="brand" href="${pageContext.request.contextPath}/"> <img
						alt="logo" 
						src="${pageContext.request.contextPath}/resources/img/logo.png" />
					</a>
				</c:when>
				<c:otherwise>
					<a class="brand"
						href="${pageContext.request.contextPath}/dashboard"> <img
						alt="Charisma Logo"
						src="${pageContext.request.contextPath}/resources/img/logo.png" />
					</a>
				</c:otherwise>
			</c:choose>
			<c:choose>
				<c:when test="${userDetails.fName==null}">
					<!-- user dropdown starts -->
					<div class="btn-group pull-right">
						<a class="btn dropdown-toggle" data-toggle="dropdown"
							data-hover="dropdown" href="#"> <i class="icon-user"></i><span
							class="hidden-phone"> Guest</span> <span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li><a href="login"><fmt:message key="navbar.menu.login" /></a></li>
							<!-- theme selector starts -->
							<li class="dropdown-submenu pull-left">
			                  <a href="#">Change Theme</a>
			                  <ul class="dropdown-menu" id="themes">
									<li><a data-value="classic" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-classic.css"><i class="icon-blank"></i> Classic</a></li>
									<li><a data-value="cerulean" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-cerulean.css"><i class="icon-blank"></i> Cerulean</a></li>
									<li><a data-value="cyborg" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-cyborg.css"><i class="icon-blank"></i> Cyborg</a></li>
									<li><a data-value="redy" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-redy.css"><i class="icon-blank"></i> Redy</a></li>
									<li><a data-value="journal" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-journal.css"><i class="icon-blank"></i> Journal</a></li>
									<li><a data-value="simplex" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-simplex.css"><i class="icon-blank"></i> Simplex</a></li>
									<li><a data-value="slate" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-slate.css"><i class="icon-blank"></i> Slate</a></li>
									<li><a data-value="spacelab" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-spacelab.css"><i class="icon-blank"></i> Spacelab</a></li>
									<li><a data-value="united" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-united.css"><i class="icon-blank"></i> United</a></li>
								</ul>
			                </li>
			                <!-- theme selector ends -->
							<li><a href="register"><fmt:message
										key="navbar.menu.register" /></a></li>
						</ul>
					</div>
					<!-- user dropdown ends -->
				</c:when>
				<c:otherwise>
					<!-- user dropdown starts -->
					<div class="btn-group pull-right">
						<a class="btn dropdown-toggle" data-toggle="dropdown"
							data-hover="dropdown" href="#"> <i class="icon-user"></i><span
							class="hidden-phone"> ${userDetails.nickName}</span> <span
							class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li><a href="profile">Profile</a></li>
							<!-- theme selector starts -->
							<li class="dropdown-submenu pull-left">
			                  <a href="#">Change Theme</a>
			                  <ul class="dropdown-menu" id="themes">
									<li><a data-value="classic" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-classic.css"><i class="icon-blank"></i> Classic</a></li>
									<li><a data-value="cerulean" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-cerulean.css"><i class="icon-blank"></i> Cerulean</a></li>
									<li><a data-value="cyborg" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-cyborg.css"><i class="icon-blank"></i> Cyborg</a></li>
									<li><a data-value="redy" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-redy.css"><i class="icon-blank"></i> Redy</a></li>
									<li><a data-value="journal" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-journal.css"><i class="icon-blank"></i> Journal</a></li>
									<li><a data-value="simplex" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-simplex.css"><i class="icon-blank"></i> Simplex</a></li>
									<li><a data-value="slate" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-slate.css"><i class="icon-blank"></i> Slate</a></li>
									<li><a data-value="spacelab" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-spacelab.css"><i class="icon-blank"></i> Spacelab</a></li>
									<li><a data-value="united" href="#" rel="${pageContext.request.contextPath}/resources/css/bootstrap-united.css"><i class="icon-blank"></i> United</a></li>
								</ul>
			                </li>
			                <li class="dropdown-submenu pull-left">
			                  <a href="#">Fast Access</a>
			                  <ul class="dropdown-menu">
									<li><a href="calendar">Calendar</a></li>
									<li><a href="newLead">New Lead</a></li>
									<li><a href="newAccount">New Account</a></li>
									<li><a href="newContact">New Contact</a></li>
								</ul>
			                </li>
			                <!-- theme selector ends -->
							<li><a href="logout"><fmt:message
										key="navbar.menu.logout" /></a></li>
						</ul>
					</div>
					<!-- user dropdown ends -->
				</c:otherwise>
			</c:choose>
			<c:choose>
			<c:when test="${userDetails!=null}">
					<!-- nodification area starts -->
					<div class="btn-group pull-right">
					<div class="nofications" id="nofications" style="width:160px;">
						<a href="#" title="Appointments" data-rel="tooltip" class="btn btn-warning">123</a>
						<a href="#" title="Calls" data-rel="tooltip" class="btn btn-success">23</a>
						<a href="#" title="Requests" data-rel="tooltip" class="btn btn-important">1223</a>						
					</div>
					</div>
				</c:when>
			</c:choose>
		</div>
	</div>
</div>
<!-- topbar ends -->